<template>
  <div class="task-view-result">
    <div class="task-left">
      <div class="left-header">
        <span class="nav-title">子任务：</span>
        <span
          v-for="(item, index) in taskRoles"
          class="nav-tag"
          :class="{'active-task': index === activeTask}"
          :key="index"
          :type="item.tagType"
          @click="checkTag(index)"
        >
          {{item.name}}
        </span>
      </div>
      <div class="seperation-line"></div>
      <div class="left-task-para">
        <div class="task-para-title">任务参数</div>
        <div class="task-para-content">
          <div class="task-para-item item-inline">
            <span class="task-para-item-title">子任务个数</span>
            <span class="task-para-item-content">{{curTaskConfigItem.taskNumber}}</span>
          </div>
          <div class="task-para-item item-inline">
            <span class="task-para-item-title">GPU个数</span>
            <span class="task-para-item-content">{{curTaskConfigItem.gpuNumber}}</span>
          </div>
          <div class="task-para-item item-inline">
            <span class="task-para-item-title">最少成功次数</span>
            <span class="task-para-item-content">{{curTaskConfigItem.minSucceededTaskCount ? curTaskConfigItem.minSucceededTaskCount : '-'}}</span>
          </div>
          <div class="task-para-item item-inline">
            <span class="task-para-item-title">最少失败次数</span>
            <span class="task-para-item-content">{{curTaskConfigItem.minFailedTaskCount ? curTaskConfigItem.minFailedTaskCount : '-'}}</span>
          </div>
          <div class="task-para-item item-block">
            <span class="task-para-item-title">引用的模型</span>
            <span class="task-para-item-content">
              <span v-if="taskModelArr.length && taskModelArr.length > 0"><a class="task-para-item-content-model" v-for="(item, index) in taskModelArr" @click="toModelDetail(item)" :key="index">{{item.modelId}}<span>;</span></a></span>
              <span v-else>-</span>
            </span>
          </div>
          <!-- <div class="task-para-item item-block">
            <span class="task-para-item-title">超参数</span>
            <span class="task-para-item-content">{{curTaskConfigItem.command ? curTaskConfigItem.command.split(' --')[1] ? curTaskConfigItem.command.split(' --')[1]  : '-' : '-'}}</span>
          </div> -->
          <div class="task-para-item item-block">
            <span class="task-para-item-title">启动命令</span>
            <span class="task-para-item-content item-command">{{curTaskConfigItem.command}}</span>
          </div>
        </div>
      </div>
      <div class="seperation-line"></div>
      <div class="left-task-para">
        <div class="task-para-title">任务详情</div>
          <div class="task-para-content">
            <div class="task-para-item item-inline">
            <span class="task-para-item-title">Task Role</span>
            <span class="task-para-item-content">{{taskRoles.length > 0 ? taskRoles[activeTask].name : ''}}</span>
          </div>
          <div class="task-para-item item-inline">
            <span class="task-para-item-title">IP</span>
            <span class="task-para-item-content">{{taskRoles.length > 0 ? taskRoles[activeTask].containerIp : ''}}</span>
          </div>
          <div class="task-para-item item-inline">
            <span class="task-para-item-title">Task Index</span>
            <span class="task-para-item-content">{{taskRoles.length > 0 ? taskRoles[activeTask].taskIndex : ''}}</span>
          </div>
          <div class="task-para-item item-inline">
            <span class="task-para-item-title">GPUs</span>
            <span class="task-para-item-content">{{taskRoles.length > 0 ? taskRoles[activeTask].containerGpus : ''}}</span>
          </div>
          <div class="task-para-item item-block">
            <span class="task-para-item-title">Container Name</span>
            <span class="task-para-item-content">{{taskRoles.length > 0 ? taskRoles[activeTask].containerId : ''}}</span>
          </div>
        </div>
      </div>
      <div class="seperation-line"></div>
      <div class="task-log">
        <div class="task-log-title">日志</div>
        <div class="result-box result-box-log" v-html="result" v-if="result"></div>
        <div v-else class="no-data">暂无数据</div>
      </div>
      <div class="seperation-line"></div>
      <div class="task-retry">
        <div class="task-retry-title">重启信息</div>
        <div v-if="retryInfo && retryInfo.length > 0">
          <div v-for="(info, index) in retryInfo" :key="index">
            <div class="result-box" v-html="info.retrylog"></div>
          </div>
        </div>
        <div v-else class="no-data">暂无数据</div>
      </div>
      <div class="seperation-line"></div>
      <div class="task-ssh">
        <div class="task-ssh-title">SSH信息</div>
        <div v-if="showSSHInfo">
          <p>Step 1: Open a Bash shell terminal.</p>
          <p>Step 2: Copy and save private key as a file named {{sshInfoKeyPair.privateKeyFileName}}:</p>
          <pre class="key-pane">
            <code>{{sshInfoKeyPair.privateKey}}</code>
          </pre>
          <p>Step 3: Set correct permission for the key file:</p>
          <p><code>chmod 600 {{sshInfoKeyPair.privateKeyFileName}}</code></p>
          <p>Step 4:Connect to the container:</p>
          <p><code>ssh -i {{sshInfoKeyPair.privateKeyFileName}} -p {{sshInfoContainer.sshPort}} root@{{sshInfoContainer.sshIp}}</code></p>
        </div>
        <div v-else class="no-data">{{sshInfo}}</div>
      </div>
    </div>
    <div class="task-right">
      <div class="task-detail">
        <div class="detail-line"><span class="header-title">概览</span></div>
        <div class="detail-line"><span class="line-title">任务名称</span><span class="line-content">{{curTask.jobName}}</span></div>
        <div class="detail-line"><span class="line-title">状态</span><span class="line-content">{{curTask.status}}</span></div>
        <div class="detail-line"><span  class="line-title">创建时间</span><span class="line-content">{{curTask.taskCreateTime ? new Date(curTask.taskCreateTime).Format("yyyy-MM-dd hh:mm:ss") : '-'}}</span></div>
        <div class="detail-line" v-show="curTask.state !== 'WAITING'"><span class="line-title">开始时间</span><span class="line-content">{{curTask.createTime ? new Date(curTask.createTime).Format("yyyy-MM-dd hh:mm:ss"): '--'}}</span></div>
        <div class="detail-line" v-show="curTask.state !== 'WAITING' && curTask.state !== 'RUNNING'"><span class="line-title">结束时间</span><span class="line-content">{{curTask.completedTime ? new Date(curTask.completedTime).Format("yyyy-MM-dd hh:mm:ss") : '--'}}</span></div>
        <div class="detail-line" v-show="curTask.state !== 'WAITING'"><span class="line-title">用时</span><span class="line-content">{{curTask.duration}}</span></div>
        <div class="detail-line detail-calc" :class="{'detail-calc-two':detailsBtn || detailsBtns}" v-if="calculationPower > 0">
          <span class="line-title">本次任务共消费</span>
          <span class="line-content">
            <span class="red">{{calculationPower}}</span> 算力
            <a v-popover:popover4 class="navs-detail-more">明细</a>
          </span>
          <el-popover
            placement="bottom"
            trigger="hover"
            ref="popover4"
            v-model="decision"
            width="350">
            <div class="calc-detail-wrapper">
              <div class="calc-detail-item">
                <div class="pop-title">任务配置：</div>
                <div class="pop-content">{{expandResult.gpuNum}}个{{expandResult.gpuType}}，{{expandResult.cpuNum}}核CPU，{{expandResult.memoryNum}}G内存，{{expandResult.sharedMemoryNum}}M共享缓存</div>
              </div>
              <div class="calc-detail-item">
                <div class="pop-title">价格：</div>
                <div class="pop-content">{{expandResult.unitPrice}}算力/小时</div>
              </div>
              <div class="calc-detail-item">
                <div class="pop-title">运算用时：</div>
                <div class="pop-content">{{changeRunHours}}</div>
              </div>
            </div>
          </el-popover>
        </div>
        <div class="task-env">
          <div class="env-title"><span class="header-title">环境</span></div>
          <div class="env-content">
            <p>{{curTask.algorithm}}</p>
            <p>{{curTask.language}}</p>
          </div>
        </div>
      </div>
      <div class="task-remark">
        <div class="task-remark-header">
          <span class="task-remark-title">备注</span>
          <span v-show="!showRemarkEdit" class="task-remark-edit" @click="editTaskRemark"><i class="task-remark-icon"></i></span>
        </div>
        <div class="task-remark-content">
          <p v-show="!showRemarkEdit && !taskRemarkForm.remarkContent">记录关键数据，在任务列表显示</p>
          <p class="task-remark-box" v-show="!showRemarkEdit && taskRemarkForm.remarkContent" v-html="taskRemarkForm.remarkContent"></p>
          <el-form v-show="showRemarkEdit" ref="taskRemarkForm" :model="taskRemarkForm" :rules="taskRemarkFormRules">
            <el-form-item prop="remarkContent">
              <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入您要记录的内容"
                v-model="taskRemarkForm.remarkContent">
              </el-input>
            </el-form-item>
            <el-form-item class="task-remark-submit">
              <span class="task-remark-submit-cancle" @click="onCancleTaskRemark">取消</span>
              <span class="task-remark-submit-confirm" type="primary" @click="onSubmitTaskRemark">提交</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import { taskOperation, jobRemarkEdit } from '@/api/project'
import { getModelType } from '@/api/model'
import { getTaskExpend } from '@/api/order'
import { mapGetters, mapMutations } from 'vuex'
// import { computeTaskStatus, computedDurTime } from '@/common/js/utils'

export default {
  props: {
    curTask: Object
  },
  data () {
    return {
      activeTask: 0,
      result: '',
      taskRoles: [],
      activeIndex: 0,
      activeNames: [],
      retryInfo: [],
      sshInfoContainer: '',
      sshInfoKeyPair: '',
      sshInfo: '暂无数据',
      showSSHInfo: false,
      calculationPower: 0,
      expandResult: '',
      decision: false,
      detailsBtn: true,
      detailsBtns: true,
      changeRunHours: '-',
      // 显示备注编辑
      showRemarkEdit: false,
      // 备注表单内容
      taskRemarkForm: {
        remarkContent: ''
      },
      originRemarkContent: '',
      taskRemarkFormRules: {
        remarkContent: [
          { max: 500, message: '备注内容不能超过500个字符字符', trigger: 'blur' }
        ]
      },
      config: '',
      curTaskConfigItem: '',
      taskModelArr: [],
      taskModel: ''
    }
  },
  watch: {
    curTask: function (newVal, oldVal) {
      if (this.curTask.config) {
        this.config = JSON.parse(this.curTask.config)
        if (this.config.models.length && this.config.models.length > 0) {
          this.taskModelArr = this.config.models
        }
        if (this.taskRoles.length > 0) {
          const taskName = this.taskRoles[0].name.split(' ')[0]
          this.config.taskRoles.map(item => {
            if (item.taskName === taskName) {
              this.curTaskConfigItem = item
            }
          })
        }
      }
      this.taskRemarkForm.remarkContent = newVal.remark
      if (newVal.state === 'RUNNING') {
        this._getSSHInfo()
      }
      if (newVal.state === 'SUCCEEDED' || newVal.state === 'FAILED') {
        this.detailsBtn = false
        this._getTaskExpend()
      }
    }
  },
  methods: {
    // 跳转模型详情页
    toModelDetail (item) {
      const query = `?modelIds=${item.modelDataId}`
      getModelType(query).then(res => {
        if (res.message.code === 0) {
          const type = res.data[0].type
          if (type === 0 && item.owner === this.userInfo.id) {
            this.$router.push({ path: '/modellump/privatedetailed', query: { active: 1, modelId: item.modelDataId, modelName: item.modelId, type: type } })
          } else {
            this.$router.push({ path: '/modellump/opendetailed', query: { active: 1, modelId: item.modelDataId, modelName: item.modelId, type: type } })
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 编辑任务备注
    editTaskRemark () {
      this.originRemarkContent = this.taskRemarkForm.remarkContent
      if (this.taskRemarkForm.remarkContent) {
        const reg1 = new RegExp('<p>', 'g')
        const reg2 = new RegExp('</p>', 'g')
        const reg3 = new RegExp('<br>', 'g')
        this.taskRemarkForm.remarkContent = this.taskRemarkForm.remarkContent.replace(reg1, '').replace(reg2, '').replace(reg3, '\n')
      }
      this.showRemarkEdit = true
    },
    // 选择Tag
    checkTag (index) {
      this.activeTask = index
      this._getLogContent(this.taskRoles[index].containerLog)
      if (this.sshInfo.containers && this.sshInfo.containers.length > 0) {
        this.sshInfo.containers.map(item => {
          if (item.id === this.taskRoles[index].containerId) {
            this.sshInfoContainer = item
          }
        })
      }
      const taskName = this.taskRoles[index].name.split(' ')[0]
      this.config.taskRoles.map(item => {
        if (item.taskName === taskName) {
          this.curTaskConfigItem = item
        }
      })
    },
    // 查看更多参数
    viewMoreConfig () {
      this.$router.push({ path: '/project/task/view/cfg' })
    },
    // 二进制转换
    convertBinary (val) {
      let gpuStr = ''
      const binay = val.toString(2)
      for (let i = 0; i < binay.length; i++) {
        if ((1 << i) & val) {
          gpuStr += i.toString()
        }
      }
      return gpuStr
    },
    onSubmitTaskRemark () {
      this.$refs.taskRemarkForm.validate((valid) => {
        if (valid) {
          this._jobRemarkEdit()
          this.showRemarkEdit = false
        }
      })
    },
    // 取消备注编辑
    onCancleTaskRemark () {
      this.showRemarkEdit = false
      this.taskRemarkForm.remarkContent = this.originRemarkContent
    },
    /*
      -----接口调用-----
    */
    // 查询用户任务详情   TODO
    // _getUserTaskDetail () {
    //   let query = `?jobName=${this.$route.query.taskname}`
    //   getUserTaskDetail(query).then(res => {
    //     if (res.message.code === 0) {
    //       this.curTask = res.data
    //       let computedStatus = computeTaskStatus({ state: this.curTask.state, executionType: this.curTask.executionType })
    //       this.curTask.status = computedStatus.val
    //       this.curTask.duration = computedDurTime(this.curTask.timeConsuming)
    //       // this.curTask.duration = computedDuration(this.curTask.createTime, this.curTask.completedTime)
    //       // if (this.curTask.state === 'RUNNING' && this.curTask.executionType !== 'STOP' && this.curTask.completedTime === 0) this.curTask.duration = computedDuration(this.curTask.createTime, Date.now())
    //       if (this.curTask.state === 'RUNNING') {
    //         this._getSSHInfo()
    //       }
    //       if (this.curTask.state === 'SUCCEEDED' || res.data.state === 'FAILED') {
    //         this.detailsBtn = false
    //         this._getTaskExpend()
    //       }
    //     } else {
    //       this.$message({ message: res.message.message, showClose: true, type: 'error' })
    //     }
    //   })
    // },

    // 查询任务详情
    _getTaskDetail (jobId, operateType) {
      let para = `?jobId=${jobId}&operateType=${operateType}`
      taskOperation(para).then(res => {
        if (res.message.code === 0) {
          this.taskRoles = []
          res.data.jobDetail && Object.keys(res.data.jobDetail.taskRoles).forEach(key => {
            res.data.jobDetail.taskRoles[key].taskStatuses.forEach(el => {
              let tempName = res.data.jobDetail.taskRoles[key].taskRoleStatus.name
              el.name = tempName + ' ' + el.taskIndex
              const gpus = el.containerGpus === 0 || el.containerGpus === null ? '-' : this.convertBinary(el.containerGpus)
              if (el.containerGpus !== 0 && el.containerGpus !== null) {
                const gpusArr = gpus.split('')
                const gpusDoneArr = gpusArr.map(item => {
                  return '#' + item
                })
                el.containerGpus = gpusDoneArr.toString()
              } else {
                el.containerGpus = '-'
              }
              this.taskRoles.push(el)
            })
          })
          this.taskRoles.forEach((el, i) => {
            if (i === 0) {
              el.tagType = ''
              this._getLogContent(el.containerLog)
            } else {
              el.tagType = 'info'
            }
          })
          if (this.config) {
            const taskName = this.taskRoles[0].name.split(' ')[0]
            this.config.taskRoles.map(item => {
              if (item.taskName === taskName) {
                this.curTaskConfigItem = item
              }
            })
          }
          this.storeTaskConfig(res.data.jobConfig)
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取日志
    _getLogContent (url) {
      if (!url) return false
      let logUrl = `${process.env.VUE_APP_BASEURL}/logHandle?url=${url}`
      axios({
        method: 'get',
        url: logUrl
      }).then(res => {
        this.result = res.data
      })
    },
    // 获取RetryInfo
    _getRetryInfo (jobName) {
      let logUrl = `${process.env.VUE_APP_BASEURL}/rest-server/api/v1/jobs/${jobName}/retrylog`
      axios({
        method: 'get',
        url: logUrl
      }).then(res => {
        this.retryInfo = res.data.data
        if (res.data.data && res.data.data.length === 0) {
          let nullInfo = {
            'retrylog': '暂无数据'
          }
          this.retryInfo.push(nullInfo)
        }
      })
    },
    // 获取SSH Info
    _getSSHInfo () {
      let logUrl = `${process.env.VUE_APP_BASEURL}/rest-server/api/v1/jobs/${this.$route.query.taskname}/ssh`
      axios({
        method: 'get',
        url: logUrl
      }).then(res => {
        if (res.data.containers && res.data.containers.length > 0) {
          this.sshInfo = res.data
          this.sshInfoKeyPair = res.data.keyPair
          res.data.containers.map(item => {
            if (item.id === this.taskRoles[Number(this.activeIndex)].containerId) {
              this.sshInfoContainer = item
            }
          })
          this.showSSHInfo = true
        } else {
          this.sshInfo = res.data.message
        }
      })
    },
    // 查询任务消耗算力情况
    _getTaskExpend () {
      const data = qs.stringify({
        'taskName': this.$route.query.taskname,
        'clusterName': process.env.VUE_APP_CLUSTER,
        'token': this.userInfo.bitaToken
      })
      getTaskExpend(data).then(res => {
        if (res.code === 0) {
          this.detailsBtns = false
          if (res.result) {
            this.calculationPower = res.result.calculationPower
            this.expandResult = res.result
            this.changeRunHours = this.timeStamp(this.expandResult.runHours)
          }
        } else {
          this.detailsBtns = true
        }
      })
    },
    // 添加或编辑任务备注
    _jobRemarkEdit () {
      // 如果没有修改内容，不提交请求
      if (this.originRemarkContent === this.taskRemarkForm.remarkContent) {
        this.showRemarkEdit = false
        return false
      }
      let arr = []
      this.taskRemarkForm.remarkContent.split('\n').forEach(item => arr.push(`<p>${item.trim()}</p>`))
      const remark = arr.join('<br>')
      this.taskRemarkForm.remarkContent = remark
      const data = qs.stringify({
        'projectId': this.curTask.projectId,
        'jobName': this.curTask.jobName,
        'remark': remark
      })
      jobRemarkEdit(data).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '提交成功', showClose: true, type: 'success' })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    timeStamp (StatusMinute) {
      var day = parseInt(StatusMinute / 24)
      var hour = parseInt(StatusMinute % 24)
      var min = parseInt(parseFloat('0.' + String(StatusMinute.toString().replace(/\d+\.(\d*)/, '$1'))) * 60)
      var seconds = parseInt(parseFloat('0.' + String(String(parseFloat('0.' + String(StatusMinute.toString().replace(/\d+\.(\d*)/, '$1'))) * 60).toString().replace(/\d+\.(\d*)/, '$1'))) * 60)
      StatusMinute = ''
      if (day > 0) {
        StatusMinute = day + 'd'
      }
      if (hour > 0) {
        StatusMinute += hour + 'h'
      }
      if (min > 0) {
        StatusMinute += min + 'm'
      }
      if (seconds > 0) {
        StatusMinute += seconds + 's'
      }
      return StatusMinute
    },
    ...mapMutations({
      storeTaskConfig: 'SET_CUR_TASK_CONFIG'
    })
  },
  mounted () {
    this._getTaskDetail(this.$route.query.taskid, 1)
    this._getRetryInfo(this.$route.query.taskname)
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  }
}
</script>

<style lang="stylus">
.task-view-result
  .seperation-line
    border-bottom 1px solid #E2E3E3
  .red
    color #f56c6c
  .task-left
    display inline-block
    width 800px
    .left-header
      display flex
      flex-wrap wrap
      padding 5px 0 13px
      font-size 14px
      .nav-title
        display inline-block
        height 28px
        line-height 28px
        margin-right 8px
        color #676767
      .nav-tag
        cursor pointer
        border 1px solid #DCDFE6
        border-radius 3px
        margin 0 12px 12px 0
        color #2D323B
        height 28px
        line-height 28px
        padding 0 11px
      .active-task
        border 1px solid #A3D0FD
        color #2196F3
    .left-task-para
      padding 23px 0 10px
      font-size 14px
      color #2D323B
      line-height 22px
      .task-para-title
        font-size 18px
        color #2D323B
        line-height 24px
        font-weight 600
        padding-bottom 21px
      .task-para-content
        .task-para-item
          display flex
          padding-bottom 15px
          .task-para-item-title
            font-size 14px
            color #999999
            width 112px
            display inline-block
          .task-para-item-content
            font-size 14px
            color #2D323B
          .task-para-item-content-model
            span
              padding 0 6px
              color #2D323B
        .item-inline
          display inline-block
          width 50%
        .item-block
          .task-para-item-content
            display inline-block
            width 700px
          .item-command
            background #F8F9FA
            padding 0 10px
            width 720px
            box-sizing content-box
            line-height 24px
    .task-log, .task-retry
      padding-bottom 30px
      .result-box
        max-height 529px
        min-height 50px
        overflow auto
        color #6e6e6e
        font-size 14px
        >pre
          white-space pre-wrap
          word-wrap break-word
          overflow hidden
          font-size 12px
          line-height 17px
      .result-box-log
        background #4C5D79
        color #FFFFFF
        padding 16px
    .task-ssh
      padding 20px 0
      p
        font-size 14px
        color #6e6e6e
        line-height 24px
      .key-pane
        display block
        padding 9.5px
        margin 0 0 10px
        font-size 13px
        line-height 1.42857143
        color #333
        word-break break-all
        word-wrap break-word
        background-color #f5f5f5
        border 1px solid #ccc
        border-radius 4px
        >code
          font-family Menlo,Monaco,Consolas,Courier New,monospace
          padding 0
          font-size inherit
          color inherit
          white-space pre-wrap
          background-color transparent
          border-radius 0
          word-break break-all
          word-wrap break-word
          display flex
          justify-content: flex-start;
    .task-log-title, .task-retry-title, .task-ssh-title
      font-size 18px
      color #2D323B
      line-height 24px
      font-weight 600
      padding 26px 0 14px
    .no-data
      font-size 14px
      color #6E6E6E
  .task-right
    float right
    width 300px
    .task-detail
      padding 20px 21px 20px 37px
      margin-top 58px
      background #F8F9FA
      .detail-line
        line-height 24px
        padding-bottom 11px
        font-size 14px
        color #2D323B
        display flex
        .header-title
          font-size 18px
          color #2D323B
          line-height 28px
          font-weight 600
          padding-bottom 7px
          display inline-block
        .line-title
          display inline-block
          width 98px
          color #999999
        .line-content
          word-break break-all
          display inline-block
          width 136px
      .detail-calc
        padding 56px 0px
        display flex
        justify-content space-between
        &.detail-calc-two
          overflow hidden
          padding 0
      .detail-bottom
        position absolute
        bottom 20px
        color #40aaff
        cursor pointer
    .task-env
      padding 40px 0 5px
      margin 0
      .env-title
        font-size 16px
        color #2D323B
        line-height 28px
        font-weight 600
        padding-bottom 8px
      .env-content
        font-size 14px
        color #4A4A4A
        line-height 24px
    .task-remark
      background #F8F9FA
      padding 15px 38px
      margin-top 30px
      font-size 16px
      line-height 28px
      color #2d323b
      .task-remark-header
        display flex
        align-items center
        padding-bottom 16px
        .task-remark-title
          font-weight 600
          font-size 16px
          color #2D323B
          line-height 28px
          margin-right 17px
        .task-remark-edit
          cursor pointer
          display flex
          align-items center
          .task-remark-icon
            display inline-block
            width 14px
            height 14px
            background url(../../common/image/icon/editor.png) no-repeat center
            background-size 14px 14px
      .task-remark-content
        word-break break-all
        font-size 13px
        color #999999
        .task-remark-box
          line-height 24px
          >br
            display none
        .task-remark-submit
          display flex
          justify-content flex-end
          font-size 14px
          color #2D323B
          line-height 24px
          height 24px
          .task-remark-submit-cancle
            margin-right 15px
            cursor pointer
            font-size 14px
            color #2D323B
          .task-remark-submit-confirm
            background #E2E3E3
            border-radius 4px
            padding 2px 13px
            cursor pointer
            height 100%
            display inline-flex
            align-items center
            font-size 14px
            color #2D323B
        .el-form-item
          margin-bottom 16px
        .el-form-item__content
          line-height inherit
        >textarea
          &:input-placeholder
            color red
.calc-detail-wrapper
  .calc-detail-item
    font-size 14px
    color #4a4a4a
    line-height 24px
    display flex
    justify-content space-between
    .pop-title
      display flex
      width 30%
      justify-content flex-end
    .pop-content
      width 70%
</style>
